<script setup lang='ts'>
import HomeHead from './ui/HomeHead.vue'
import LeftList from './ui/LeftList.vue'
import RightList from './ui/RightList.vue'
import BottomInfo from './ui/BottomInfo.vue'
import { onMounted } from 'vue'
import { useUserStore } from '@/store'
const store = useUserStore()
onMounted(() => {
  // store.getMenuList()
})
</script>

<template>
  <div class="home-page-main-box">
    <div class="head-box">
      <HomeHead />
    </div>
    <div class="top-box">
      <div class="left-box">
        <LeftList />
      </div>
      <div class="middle-box">
        <ThreeDimensionalModel :type="0" />
      </div>
      <div class="right-box">
        <RightList />
      </div>
    </div>
    <div class="bottom-box">
      <BottomInfo />
    </div>
  </div>
</template>

<style scoped lang=scss>
.home-page-main-box {
  width: 100%;
  height: 100%;
  background-image: url("../../assets/imgs/bg.jpg");
  background-size: 100% 100%;

  .head-box {
    height: 10%;

    /* border: 1px solid red; */
  }

  .top-box {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 60%;

    /* border: 1px solid red; */

    .left-box {
      width: 22%;
      height: 100%;
      margin-left: 10px;

      /* border: 1px solid green; */
    }

    .middle-box {
      width: 49%;
      height: 100%;

      /* border: 1px solid green; */
    }

    .right-box {
      width: 27%;
      height: 100%;
      margin-right: 10px;

      /* border: 1px solid green; */
    }
  }

  .bottom-box {
    width: 100%;
    height: 29%;
    margin-top: 10px;
    padding: 0 10px;

    /* border: 1px solid green; */
  }
}
</style>